<template>
  <div id="app">
    <MyHeader title="TabBar案例" />
    <!-- <MyGoodsList />
    <MyGoodsSearch />
    <MyGoodsInfo /> -->
    <component :is="componentName"/>
    <!-- $event 等价于 item.componentName -->
    <MyTabbar :arr="tabList" @tabBarItem="componentName = $event"/>
  </div>
</template>

<script>
import MyHeader from './components/MyHeader.vue'
import MyTabbar from './components/MyTabbar.vue'
import MyGoodsList from './components/MyGoodsList.vue'
import MyGoodsSearch from './components/MyGoodsSearch.vue'
import MyUserInfo from './components/MyGoodsInfo.vue'
export default {
  data () {
    return {
      tabList: [
        {
          iconText: 'icon-shangpinliebiao',
          text: '商品列表',
          componentName: 'MyGoodsList'
        },
        {
          iconText: 'icon-sousuo',
          text: '商品搜索',
          componentName: 'MyGoodsSearch'
        },
        {
          iconText: 'icon-user',
          text: '我的信息',
          componentName: 'MyUserInfo'
        }
      ],
      componentName: 'MyGoodsList'
    }
  },

  components: {
    MyHeader,
    MyTabbar,
    MyGoodsList,
    MyGoodsSearch,
    MyUserInfo
  },

  created () {

  },

  methods: {

  }
}
</script>

<style scoped>
  #app {
    padding-top: 45px;
  }
</style>
